<template>
  <div
    ref="mapContainer"
    id="mapContainer"
    style="width: 100vw; height: 100vh"></div>

  <activity-panel>
    <el-button @click="addLayer">添加图层</el-button>
    <el-button @click="removeLayer">移除图层</el-button>
  </activity-panel>
</template>

<script setup>
import { onMounted, nextTick, ref } from "vue";
import useInitMap from "@/utils/ol/useInitMap";
import { WindLayer, Field } from "ol-wind";
import { Graticule as GraticuleLayer } from "ol/layer";

useInitMap({
  target: "mapContainer",
  zoom: 7,
  onLoadEnd: onLoadEnd,
});

function onLoadEnd(map) {
  addGraticuleLayer();
  addWindLayer();
}

function addGraticuleLayer(map) {
  const graticuleLayer = new GraticuleLayer({
    // intervals: [1, 1],
    showLabels: true,
  });

  graticuleLayer.id = "graticuleLayer";
  graticuleLayer.name = "经纬网格";

  window.map.addLayer(graticuleLayer);
}

function addWindLayer() {
  import("../../../data/流场数据/2025_06_29_06_00_00.json").then(res => {
    const data = res.default;
    console.log(data);

    const data_hn = clipData(data);

    const windLayer = new WindLayer(data_hn, {
      forceRender: false,
      windOptions: {
        globalAlpha: 0.95, // 粒子透明度，默认0.9
        velocityScale: 0.01, // 粒子运动速度系数，数值越大越快
        paths: 5000,
        colorScale: [
          // 粒子颜色设置
          "rgb(36,104, 180)",
          "rgb(60,157, 194)",
          "rgb(128,205,193 )",
          "rgb(151,218,168 )",
          "rgb(198,231,181)",
          "rgb(238,247,217)",
          "rgb(255,238,159)",
          "rgb(252,217,125)",
          "rgb(255,182,100)",
          "rgb(252,150,75)",
          "rgb(250,112,52)",
          "rgb(245,64,32)",
          "rgb(237,45,28)",
          "rgb(220,24,32)",
          "rgb(180,0,35)",
        ],
        lineWidth: 2, // 粒子路径宽度
        width: 3,
        generateParticleOption: false,
      },
      wrapX: true,
      projection: "EPSG:4326",
    });

    windLayer.id = "windLayer";
    windLayer.name = "风场图";

    window.map.addLayer(windLayer);
  });
}

function clipData(data) {
  const field = getField(data);

  console.log("field", field);

  // 河南省的经纬度范围
  const extent = [110, 31, 116.5, 36];
  // const extent = [110.25, 31.25, 116.5, 36.25];

  const la1 = extent[1];
  const la2 = extent[3];
  const lo1 = extent[0];
  const lo2 = extent[2];

  const dx = 0.5;
  const dy = 0.5;
  // const dx = 0.25;
  // const dy = 0.25;

  const nx = (lo2 - lo1) / dx + 1;
  const ny = (la2 - la1) / dy + 1;

  const grid = [];

  for (let i = 0; i < nx; i++) {
    for (let j = 0; j < ny; j++) {
      const x = lo1 + i * dx;
      const y = la1 + j * dy;

      // 从Field实例中查询数据
      const [ii, jj] = field.getDecimalIndexes(x, y);
      const value = field.valueAtIndexes(ii, jj);

      grid.push({ x, y, u: value?.u, v: value?.v });
    }
  }

  const clippingData = data.map(record => {
    const header = structuredClone(record.header);

    header.lo1 = lo1;
    header.lo2 = lo2;
    header.la1 = la1;
    header.la2 = la2;
    header.dx = dx;
    header.dy = dy;
    header.nx = nx;
    header.ny = ny;
    header.numberPoints = grid.length;

    let data;

    switch (
      record.header.parameterCategory +
      "," +
      record.header.parameterNumber
    ) {
      case "1,2":
      case "2,2":
        data = grid.map(item => item.u);
        break;
      case "1,3":
      case "2,3":
        data = grid.map(item => item.v);
        break;
    }

    return {
      header,
      data,
    };
  });


  return clippingData;
}

function getField(data) {
  let uComp = void 0;
  let vComp = void 0;
  data.forEach(function (record) {
    switch (
      record.header.parameterCategory +
      "," +
      record.header.parameterNumber
    ) {
      case "1,2":
      case "2,2":
        uComp = record;
        break;
      case "1,3":
      case "2,3":
        vComp = record;
        break;
    }
  });
  if (!vComp || !uComp) {
    return void 0;
  }
  const header = uComp.header;
  const vectorField = new Field({
    xmin: header.lo1,
    // 一般格点数据是按照矩形范围来切割，所以定义其经纬度范围
    ymin: header.la1,
    xmax: header.lo2,
    ymax: header.la2,
    deltaX: header.dx,
    // x（经度）增量
    deltaY: header.dy,
    // y（维度）增量
    cols: header.nx,
    // 列（可由 `(xmax - xmin) / deltaX` 得到）
    rows: header.ny,
    // 行
    us: uComp.data,
    // U分量
    vs: vComp.data,
    // V分量
  });
  return vectorField;
}

function addLayer() {}

function removeLayer() {}
</script>
